<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>皮肤</title>
		<style>
			body{
				background: url(img/1.jpg) no-repeat;
			}
			.box {
	            height: 165px;
	            padding-top: 35px;
	            text-align: center;
	            padding: 0;
	            margin: 0;
	            background: rgba(255,255,255,0.3);
        		}
        		img{
        			width: 200px;
        			margin: 0 10px;
        		}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/5.jpg"/>
		</div>
		<script>
			var box = document.getElementById("box");
			var body = document.body;
			var imgArr = box.children;
			for(var i=0;i < imgArr.length;i++)
			{
				imgArr[i].index = i + 1;
				imgArr[i].onclick = function(){
					body.style.backgroundImage = "url(img/"+this.index+".jpg)";
				}
			}
		</script>
	</body>
</html>
